import useInitState from '@/hooks/useInitState'
import logoutActionCreator, {
  updatePhotoActionCreator,
  updateProfileActionCreator,
  userProfileActionCreator,
} from '@/store/actions/profile'
import {
  Button,
  List,
  DatePicker,
  NavBar,
  Popup,
  Toast,
  Dialog,
} from 'antd-mobile'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import EditInput from '../EditInput'
import EditList from '../EditList'

import styles from './index.module.scss'

const Item = List.Item

type PopUp1StateType = {
  visible: boolean
  type: 'name' | 'intro' | ''
}
type PopUp2StateType = {
  visible: boolean
  type: 'photo' | 'gender' | ''
}

const ProfileEdit = () => {
  const history = useHistory()
  const dispatch = useDispatch()

  const { userProfile } = useInitState(userProfileActionCreator).profile

  // 弹出层需要知道显示隐藏 还需要知道当前是哪个 name intro
  const [popUp1State, setPopUp1State] = useState<PopUp1StateType>({
    visible: false,
    type: '',
  })
  const [popUp2State, setPopUp2State] = useState<PopUp2StateType>({
    visible: false,
    type: '',
  })

  // 创建ref 关联原生file框
  const inputRef = useRef<HTMLInputElement>(null)

  // 控制datepicker的显示隐藏
  const [visible, setVisible] = useState(false)

  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          onBack={() => {
            // history.push('/home/profile')
            history.go(-1) // 模拟真实的返回
          }}
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              onClick={() => {
                setPopUp2State({
                  visible: true,
                  type: 'photo',
                })
              }}
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={userProfile.photo} alt="" />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item
              arrow
              extra={userProfile.name}
              onClick={() => {
                setPopUp1State({
                  visible: true,
                  type: 'name',
                })
              }}
            >
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {userProfile.intro || '未填写'}
                </span>
              }
              onClick={() => {
                setPopUp1State({
                  visible: true,
                  type: 'intro',
                })
              }}
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              onClick={() => {
                setPopUp2State({
                  visible: true,
                  type: 'gender',
                })
              }}
              arrow
              extra={userProfile.gender === 1 ? '男' : '女'}
            >
              性别
            </Item>
            <Item
              arrow
              extra={userProfile.birthday}
              onClick={() => setVisible(true)}
            >
              生日
            </Item>
          </List>

          {/* <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          /> */}
          {/* 日期选择 */}
          <DatePicker
            value={new Date(userProfile.birthday)}
            min={new Date('1990-01-01')}
            title="选择生日"
            visible={visible}
            onClose={() => {
              // 点取消、确定都会触发
              setVisible(false)
            }}
            max={new Date()}
            onConfirm={async (val) => {
              // 点击确定时 触发
              // Toast.show(val.toDateString())
              console.log(val)

              // const y = val.getFullYear()
              // const m = val.getMonth() + 1

              // 发请求  更新用户生日
              await dispatch(
                updateProfileActionCreator({
                  birthday: dayjs(val).format('YYYY-MM-DD'),
                })
              )

              Toast.show('修改生日成功')
            }}
          />
        </div>

        <div className="logout">
          <Button
            className="btn"
            onClick={() => {
              Dialog.show({
                // title: '温馨提示',
                // 对话框的主题内容
                content: '你确定退出么？',
                // 点击任意按钮 都要关闭对话框
                closeOnAction: true,
                // 配置按钮
                actions: [
                  [
                    {
                      key: 'cancel',
                      text: '取消',
                    },
                    {
                      key: 'delete',
                      text: '确认',
                      bold: true, // 加粗
                      danger: true, // 红色
                      // onClick: () => {
                      //   console.log('>>>>> 退出了')
                      // },
                    },
                  ],
                ],
                // 配置按钮的统一点击行为
                onAction: async (action, index) => {
                  // action就是配置的按钮信息对象
                  // index就是按钮的下标
                  // 只要按钮点击了  就会触发
                  // console.log(11, action, index)
                  if (index === 1) {
                    // 确认退出
                    // =》清除token（仓库，本地）  清除用户资料（基本 详情）
                    // =》回到登录页
                    await dispatch(logoutActionCreator())

                    history.push('/login')
                  }
                },
              })
            }}
          >
            退出登录
          </Button>
        </div>

        {/* 昵称 简介弹出层 */}
        {/* 关闭弹层默认是样式上的隐藏， 希望是销毁 */}
        <Popup
          visible={popUp1State.visible}
          position="right"
          bodyStyle={{ width: '100vw' }}
          destroyOnClose
        >
          <EditInput
            type={popUp1State.type}
            onClose={() => {
              setPopUp1State({
                visible: false,
                type: '',
              })
            }}
            onUpdate={async (value: string, type: string) => {
              // value 最新的数据
              // type name intro
              console.log(value, type)
              // 发请求更新数据。。。
              await dispatch(
                // { name: 'zs' } {intro: '不错'}
                updateProfileActionCreator({
                  [type]: value,
                })
              )

              Toast.show('修改成功')
              setPopUp1State({ type: '', visible: false })
            }}
          ></EditInput>
        </Popup>

        {/* 头像 性别弹出层 */}
        <Popup
          onMaskClick={() => {
            setPopUp2State({
              visible: false,
              type: '',
            })
          }}
          visible={popUp2State.visible}
          position="bottom"
          destroyOnClose
        >
          <EditList
            type={popUp2State.type}
            onClose={() => {
              setPopUp2State({
                visible: false,
                type: '',
              })
            }}
            onUpdate={async (type: string, value: number) => {
              // console.log(type, value)
              // 1. 性别
              if (type === 'gender') {
                await dispatch(
                  updateProfileActionCreator({
                    gender: value,
                  })
                )

                Toast.show('修改性别成功')
                setPopUp2State({
                  visible: false,
                  type: '',
                })
              }

              // 2. 头像
              if (type === 'photo') {
                // 模拟file框的点击行为
                inputRef.current!.click()
              }
            }}
          ></EditList>
        </Popup>

        {/* 隐藏的file框 */}
        <input
          type="file"
          hidden
          ref={inputRef}
          onChange={async (e) => {
            // console.log(e.target.files)
            const file = e.target.files![0]
            console.log(file)

            // formData 一种数据格式
            const fd = new FormData()
            // fd.append(键名， 值)
            fd.append('photo', file)

            // 请求后端接口 ， 将头像 更新
            await dispatch(updatePhotoActionCreator(fd))

            Toast.show('修改头像成功')

            setPopUp2State({
              visible: false,
              type: '',
            })
          }}
        />
      </div>
    </div>
  )
}

export default ProfileEdit
